<template>
  <div class="auto">
    <!-- <div class="span"> -->
    <h4 class="bg-info text-center">表编号为{{row.metertitle}}的欠费信息</h4>
    <data-grid :model="row" partial='list' v-ref:grid>
      <template partial='head'>
        <tr>
          <th>
            <input type="checkbox"  @click="$parent.$parent.addOrRemove($parent.$parent.selectAll)" :checked="$parent.$parent.selectAll">
          </th>
          <th>序号</th>
          <th>上期指数</th>
          <th>本期指数</th>
          <th>抄表时间</th>
          <th v-if="row.f_totalsplit_type === '分表'">承担量</th>
          <th>用气量</th>
          <th>用气金额</th>
          <th>是否缴费</th>
          <th>滞纳金</th>
          <th>滞纳天数</th>
        </tr>
      </template>
      <template partial='body'>
        <tr>
          <td style="text-align:center">
            <input type="checkbox" v-model="$parent.$parent.selecteds"
                   :value="row" @click="$parent.$parent.checkbox($index, $event)" :disabled="($index) <= $parent.$parent.maxIndex">
          </td>
          <td>{{$index + 1}}</td>
          <td>{{row.f_last_tablebase}}</td>
          <td>{{row.f_tablebase}}</td>
          <td>{{row.f_hand_date.substring(0, 10)}}</td>
          <td v-if="row.f_share_gas > 0">{{row.f_share_gas && row.f_share_gas > 0? row.f_share_gas : 0}}</td>
          <td>{{row.f_oughtamount}}</td>
          <td>{{row.f_oughtfee}}</td>
          <td>{{row.f_whether_pay}}</td>
          <!-- <td>{{row.f_end_date}}</td> -->
          <td>{{row.overdue}}</td>
          <td>{{row.overduedays}}</td>
          <td v-if="row.splitnum > 0">
            <button class="btn btn-info" @click="$parent.$parent.getSplitInfo(row)">分表详情</button>
          </td>
        </tr>
      </template>
    </data-grid>
    <!-- </div> -->
    <modal :show.sync="splitInfo" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">分表费用详情</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group">
          <table class="table">
            <thead>
            <tr>
              <th>用户姓名</th>
              <th>表编号</th>
              <th>表品牌</th>
              <th>表型号</th>
              <th>抄表状态</th>
              <th>应交气量</th>
            </tr>
            </thead>
            <tbody v-for="row in handInfo">
            <tr>
              <td style="text-align: center;">{{row.f_user_name}}</td>
              <td style="text-align: center;">{{row.f_user_id}}</td>
              <td style="text-align: center;">{{row.f_meter_brand}}</td>
              <td style="text-align: center;">{{row.f_meter_style}}</td>
              <td style="text-align: center;">{{row.f_meter_state}}</td>
              <td style="text-align: center;">{{row.f_oughtamount}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </article>

      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
  </div>
</template>
<script>
  import co from 'co'

  let getSplitInfoGen = function * (self, row) {
    let getSplit = yield self.$resetpost('rs/logic/splitInfo', {data: {totalInfo: row}}, {resolveMsg: null, rejectMsg: '获取分表抄表信息出错!!!'})
    console.log('获取分表信息。。。', getSplit)
    self.handInfo = []
    // 分表总用量
    if (getSplit.data.length > 0) {
      for (let i = 0; i < getSplit.data.length; i++) {
        self.handInfo.push(getSplit.data[i])
      }
    }
  }

  export default {
    props: ['row'],
    data () {
      return {
        splitInfo: false,
        handInfo: [],
        selecteds: [],
        maxIndex: 0,
        pages: [],
        selectAll: true
      }
    },
    ready () {
      console.log('欠费，，', this.$parent.$parent.getMaxIndex(this.row.rows))
    },
    methods: {
      getSplitInfo (row) {
        console.log('获取的总表信息', row)
        // 获取分表费用数据
        co(getSplitInfoGen(this, row))
        this.splitInfo = true
      },
      close () {
        this.splitInfo = false
      },
      checkbox (val, event) {
        console.log('checkbox--change事件', val, event)
        this.selecteds = []
        if (event.target.checked === true) {
          console.log('wofhi .,..', true)
          for (let i = 0; i <= val; i++) {
            this.selecteds.push(this.row.rows[i])
          }
        } else if (event.target.checked === false) {
          console.log('wofhi .,..', false)
          for (let i = 0; i <= val - 1; i++) {
            this.selecteds.push(this.row.rows[i])
          }
        }
        this.selectAll = (this.selecteds.length === this.row.rows.length)
        console.log('选择的欠费信息', val, this.selecteds)
      },
      addOrRemove (is) {
        console.log('默认勾选，，', this.selectAll)
        this.selecteds = []
        if (!is) { // 添加本页所有数据到ids中
          this.row.rows.forEach((row) => {
            this.selecteds.push(row)
          })
          this.selectAll = true
        } else { // 从ids中取消所有的数据
          this.row.rows.forEach((row, index) => {
            if (index <= this.maxIndex) {
              this.selecteds.push(row)
            }
          })
          this.selectAll = false
        }
      }
    },
    watch: {
      'row.rows' () {
        this.maxIndex = this.$parent.$parent.getMaxIndex(this.row.rows)
        this.maxIndex = this.maxIndex > 0 ? this.maxIndex : -1
        console.log('选择的欠费信息', this.maxIndex)
        this.selecteds = this.row.rows
      },
      'selecteds' () {
        this.$dispatch('refresh-center', this.selecteds)
      }
    }
  }
</script>
